import { SvgComponent } from "@/components/base/Svg"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import { useState } from "react"

const PromotionsContainer = styled.div`
    margin: 12rem;
    border-radius: 12rem;
    height: 100%;
    max-height: 200rem;
    overflow-y: auto;
    &::-webkit-scrollbar {
        height: 8px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }
`
const PromotionsContent = styled.div`
    max-height: 100%;
    overflow-y: auto;
    padding: 12rem;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 12rem;
    &::-webkit-scrollbar {
        height: 8px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }
`
const PromotionsTitleLine = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
`
const PromotionsTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
`
interface IsOpenProps {
    isOpen: boolean
}

const StyledOpenImage = styled(
    SvgComponent("pages/UserCenterPage/deposit/switch_open.svg"),
)<IsOpenProps>`
    width: 40rem;
    height: 20rem;
    margin-left: 8rem;
    transition: opacity 5s ease-in-out;
`

const StyledCloseImage = styled(
    SvgComponent("pages/UserCenterPage/deposit/switch_close.svg"),
)<IsOpenProps>`
    width: 40rem;
    height: 20rem;
    margin-left: 8rem;
    transition: opacity 5s ease-in-out;
`

const PromotionsSwitch = styled.div`
    display: flex;
    position: relative;
    align-items: center;
`
const SwitchText = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 14rem;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
`
const DiscountTip = styled.div`
    font-family: Gilroy;
    font-weight: 400;
    font-size: 12rem;
    padding: 8rem auto 8rem 82rem;
    letter-spacing: 0%;
`
const PromotionsCards = styled.div`
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */
    /* height: 80rem;
    min-height: 80rem; */
`
interface isLazada {
    isLazada?: boolean
}
const PromotionsTip = styled.div<isLazada>`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0%;
    padding-left: ${({ isLazada }) => (isLazada ? "12rem" : "0rem")};
    padding-right: ${({ isLazada }) => (isLazada ? "12rem" : "0rem")};
    padding-bottom: ${({ isLazada }) => (isLazada ? "201rem" : "70rem")};
    margin-top: 16rem;
    color: #69728C;
`
const BaseButton = styled.button<IsOpenProps>`
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
`
export default function Promotions() {
    const [isOpen, setIsOpen] = useState(false)
    const [selectedPaymentMethod] = useState('Lazada')
    // const [selectedPaymentMethod] = useAtom(selectedPaymentMethodAtom)
    const handleOpen = () => {
        setIsOpen(!isOpen)
    }
    const [isChecked, setIsChecked] = useState(false)

    const handleChange = (checked: boolean) => {
        setIsChecked(!checked)
    }
    const balance = 500
    const formattedBalance = formatCurrency(balance, {
        currency: "PHP",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    })
    interface PromotionsButtonProps {
        onClick: () => void
        isOpen: boolean
    }

    function PromotionsOpen({ onClick, isOpen }: PromotionsButtonProps) {
        return (
            <BaseButton
                onClick={onClick}
                isOpen={isOpen}
            >
                <StyledOpenImage isOpen={isOpen} />
            </BaseButton>
        )
    }

    function PromotionsClose({ onClick, isOpen }: PromotionsButtonProps) {
        return (
            <BaseButton
                onClick={onClick}
                isOpen={!isOpen}
            >
                <StyledCloseImage isOpen={isOpen} />
            </BaseButton>
        )
    }
    return (
        <>
            {selectedPaymentMethod !== "Lazada" ? (
                <PromotionsContainer>
                    <PromotionsContent>
                        <PromotionsTitleLine>
                            <PromotionsTitle>Promotions</PromotionsTitle>
                            <PromotionsSwitch>
                                <SwitchText>Not this time</SwitchText>
                                {isOpen ? (
                                    <PromotionsOpen
                                        onClick={handleOpen}
                                        isOpen={isOpen}
                                    />
                                ) : (
                                    <PromotionsClose
                                        onClick={handleOpen}
                                        isOpen={isOpen}
                                    />
                                )}
                            </PromotionsSwitch>
                        </PromotionsTitleLine>
                        {isOpen ? (
                            <></>
                        ) : (
                            <PromotionsCards>
                                {/* <CouponCard
                                    useChecked={isChecked}
                                    onChange={handleChange}
                                ></CouponCard>
                                <CouponCard
                                    useChecked={!isChecked}
                                    onChange={handleChange}
                                ></CouponCard> */}
                            </PromotionsCards>
                        )}
                    </PromotionsContent>
                    <PromotionsTip>
                        Generally receive deposit in 5 minutes; <br />
                        If your deposit has not been received exceed 5 minutes, please contact
                        customer service and provide your payment receipt.
                    </PromotionsTip>
                    {/* <DiscountTip>You will receive an extra bonus {formattedBalance}</DiscountTip> */}
                </PromotionsContainer>
            ) : (
                <PromotionsTip isLazada={selectedPaymentMethod === "Lazada"}>
                    Generally receive deposit in 5 minutes; <br />
                    If your deposit has not been received exceed 5 minutes, please contact customer
                    service and provide your payment receipt.
                </PromotionsTip>
            )}
        </>
    )
}
